<template>
  <div>
    <!-- 模糊搜索的表单 -->
    <el-form @submit.native.prevent :inline="true" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input
          @keyup.native.enter="search"
          v-model="name"
          placeholder="请输入姓名关键字"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>

    <el-divider content-position="left">演员列表</el-divider>
    <!-- 演员列显示 -->
    <person
      v-for="item in actors"
      @delete="delPerson(item.id)"
      :key="item.id"
      :name="item.actor_name"
      :avatar="item.actor_avatar"
    ></person>
  </div>
</template>

<script>
import myaxios from '@/http/Myaxios'
import Person from '@/components/Person.vue'
import httpApi from '@/http/index'
export default {
  components: { Person },
  data() {
    return {
      actors: [], //保存所有的演员列表
      name: '',
    }
  },
  methods: {
    delPerson(id) {
      console.log('点击了叉子,捕获了delete事件,删除id' + id)
      //发送http组件,删除这个演员,必须获取当前演员的id
      httpApi.ActorApi.del({ id }).then(res => {
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: '恭喜,删除成功',
          })
          this.search()
        }
      })
    },
    /**点击查询按钮后执行.需要判断输入框中是否有关键字 */
    search() {
      if (this.name.trim() == '') {
        //没有关键字
        this.listActors()
      } else {
        //有关键字
        this.listActorsByName()
      }
    },

    /** 通过姓名关键字查询 */
    listActorsByName() {
      httpApi.ActorApi.queryActorsByNameLike({ name: this.name }).then(res => {
        console.log('模糊查询的结果', res)
        this.actors = res.data.data
      })
    },

    /**呈现演员列表 */
    listActors() {
      httpApi.ActorApi.queryAllActors().then(res => {
        console.log(res)
        this.actors = res.data.data
      })
    },
  },
  // 页面挂在完毕后，发送请求，加载列表数据
  mounted() {
    this.listActors() //加载演员列表
  },
}
</script>

<style lang="scss" scoped></style>
